<template>
	<view>
		<view>
			<uni-search-bar @input="input" v-model="searchValue" :radius="100"  placeholder="请输入书名/作者名" @confirm="search"></uni-search-bar>
		</view>
		<view class="SearchBook">
			<view v-for="(item) in bookList" class="SearchList" @click="click(item.BookId)">
				<image :src="item.BookCover"></image>
				<view class="SearchText">
					<p class="bookname">{{item.BookName}}</p>
					<p class="bookauthor">{{item.BookAuthor}}</p>
					<p class="snycon">{{item.SnyCon}}</p>
				</view>
				<hr/>
			</view>
		</view>
	</view>
</template>
<script>
	import uniSearch from "../../components/uni-search-bar/uni-search-bar.vue"
	import findBook from "../../components/findBook/findBook.vue"
	export default {
		data() {
			return {
				bookList:[],
				searchValue: ''
			}
		},
		components:{
			findBook,
			uniSearch
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
				this.getIndexData();
				console.log(this.bookList);
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			getIndexData:function(){
				uni.request({
					url:'http://z7jxxt5.nat.ipyingshe.com/select/message',
					method:'POST',
					data:{
						// id:1
						search:this.searchValue
					},
					success:(res)=>{
						if(res.statusCode == 200){
							this.bookList = res.data.message;
						}else{
							uni.showToast({
								title:'内部服务器异常',
								duration:2000
							})
						}
					}
				})
			},
			click:function(BookId){
				uni.navigateTo({
				    url: '../../pages/details/details?BookId='+BookId
				});
			}
		},

	}
</script>
<style lang="scss">
	.SearchBook{
		padding: 10px;
	}
	.SearchList{
		image{
			margin-top: 10px;
			float: left;
			width: 20vw;
			height: 14vh;
			box-shadow: 1px 3px 5px #999999;
		}
	}
	.SearchText{
		margin-top: 10px;
		width: 65vw;
		height: 14vh;
		float: left;
    font-size: 0.8em;
		margin-left: 5vw;
		.bookname{
			line-height: 20px;
      font-size: 30rpx;
			font-weight:540;
		}
		.bookauthor{
			line-height: 25px;
      font-size: 25rpx;
		}
		.snycon{
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp:2;
      font-size: 25rpx;
			-webkit-box-orient:vertical;
			text-indent:1em;
			color: $uni-text-color-placeholder;
		}
	}

</style>
